<template>
    <div>
        <div class="crumbs" style="display:inline ;text-align: center;">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-message"></i> 数据卷</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div style="display:inline;float: right">
            <el-button type="primary" icon="delete" class="handle-del mr10" @click="cleanVolumes">- 清理系统多余的数据卷</el-button>
        </div>
            <br/>
        <el-table
            v-loading="loading"
            :data="tableData"
            style="width: 100%">
            <el-table-column
                label="数据卷名"
                width="480">
                <template slot-scope="scope">
                    <el-popover >
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">{{ scope.row.name }}</el-tag>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column
                label="容器名"
                width="180">
                <template slot-scope="scope">
                    <el-popover >
                        <div slot="reference" class="name-wrapper">

                            {{ scope.row.containerName}}
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column
                label="容器id"
                width="450">
                <template slot-scope="scope">
                    <el-popover >
                        <div slot="reference" class="name-wrapper">
                            {{ scope.row.containerId }}
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column
                label="destination"
                width="90">
                <template slot-scope="scope">
                    <el-popover >
                        <div slot="reference" class="name-wrapper">
                            {{ scope.row.destination }}
                            <!--<el-button-->
                                <!--size="mini"-->
                                <!--type="primary"-->
                                <!--@click="changeState(scope.$index, scope.row)">{{ scope.row.hasOpen }}</el-button>-->
                        </div>

                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column
                label="创建时间"
                width="180">
                <template slot-scope="scope">
                    <el-popover >
                        <div slot="reference" class="name-wrapper">
                            {{ scope.row.createDate }}
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <!--<el-table-column-->
                <!--label="来源"-->
                <!--width="130">-->
                <!--<template slot-scope="scope">-->
                    <!--<el-popover >-->
                        <!--<div slot="reference" class="name-wrapper">-->
                            <!--{{ scope.row.authorName }}-->
                        <!--</div>-->
                    <!--</el-popover>-->
                <!--</template>-->
            <!--</el-table-column>-->
            <el-table-column label="操作" fixed="right" width="100">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="primary"
                        @click="uploadDoc(scope.$index, scope.row)">上传文件</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页效果-->
        <div class="fenYe">
            <div class="block">
                <el-pagination
                    @current-change="handleCurrentChange"
                    :page-size="5"
                    layout="prev, pager, next, jumper"
                    :total="listTotal">
                </el-pagination>
            </div>
        </div>

        <!--上传文件的输入框-->
        <el-dialog
            title="上传文件"
            :visible.sync="dialogVisible"
            width="50%">
            <!--<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-position="left" label-width="100px" class="demo-ruleForm" >-->
                <!--<el-form-item label="镜像名" prop="fullName">-->
                    <!--<el-input type="password" v-model="ruleForm2.fullName" autoComplete="off"></el-input>-->
                <!--</el-form-item>-->
                <!--<el-form-item label="镜像介绍" prop="description">-->
                    <!--<el-input type="password" v-model="ruleForm2.description" autoComplete="off"></el-input>-->
                <!--</el-form-item>-->
                <!--<el-form-item label="镜像使用说明" prop="Instructions">-->
                    <!--<el-input v-model.number="ruleForm2.Instructions"></el-input>-->
                <!--</el-form-item>-->

                <el-upload
                    name="file"
                    class="upload-demo"
                    :action="imageAction"
                    :headers="urlHeaders"
                    :data="ruleForm"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    multiple
                    :limit="1"
                    :on-exceed="handleExceed"
                    :file-list="fileList">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">上传文件到数据卷</div>
                </el-upload>

            <!--</el-form>-->
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">完成</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "Volume",
        data() {
            return {
                tableData: [],
                dialogVisible:false,
                listTotal:0,
                currentPage:1,
                containerName:[],
                loading:true,

                fileList: [],
                imageAction:`api/docker/customer/uploadDocToVolume`,
                urlHeaders:{
                    'Authorization':`Bearer ${sessionStorage.getItem("Token")}`
                },
                ruleForm: {
                    name:"",
            },

            }
        },
        methods: {

            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }？`);
            },

            handleCurrentChange(val) {
                this.getFirstSelfVolume(val);
                // store.state.SelfImageCurrentPage = val;
            },
            //初始化，获取数据卷列表
            getFirstSelfVolume(val) {
                var token='Bearer '+sessionStorage.getItem("Token");
                let config = {
                    headers: {
                        'Authorization':token,
                    }
                };
                var url = "/api/docker/admin/getAllVolumes?pageIndex="+val;
                this.$axios.get(url,config).then(res=>{
                    console.log(res);
                    if(res.data.code===1) {
                        this.$message.success("成功获取数据卷");
                        this.tableData=res.data.data;
                        this.loading=false;



                    } else {
                        this.$message.error("获取数据卷失败");
                    }
                }).catch(reason => {
                    console.log(reason);
                })
            },
            //获取数据卷数量
            getSelfVolumesTotal() {
                var token='Bearer '+sessionStorage.getItem("Token");
                let config = {
                    headers: {
                        'Authorization':token,
                    }
                };
                var url = "/api/docker/admin/getAllVolumesTotal";
                this.$axios.get(url,config).then(res=>{
                    console.log(res);
                    if(res.data.code===1) {
                        this.$message.success("成功获取数据卷总数");
                        this.listTotal=res.data.data;

                    } else {
                        this.$message.error("获取数据卷总数失败");
                    }
                }).catch(reason => {
                    console.log(reason);
                    this.$message.error("获取数据卷总数失败");
                })

            },
            //上传文件
            uploadDoc(index,row) {
                this.ruleForm.name=row.name;
                // console.log(this.ruleForm.name);
                this.dialogVisible=true;
            },
            //清理系统多余的数据卷
            cleanVolumes() {
                var token='Bearer '+sessionStorage.getItem("Token");
                let config = {
                    headers: {
                        'Authorization':token,
                    }
                };
                var url = "/api/docker/admin/removeVolumesWhenContainerIsNotExisted";
                this.$axios.get(url,config).then(res=>{
                    console.log(res);
                    if(res.data.code===1) {
                        this.$message.success("清理数据卷成功");
                        this.listTotal=res.data.data;

                    } else {
                        this.$message.error(res.data.msg);
                    }
                }).catch(reason => {
                    console.log(reason);
                    // this.$message.error("获取数据卷总数失败");
                })
            },

        },
        created() {
            this.getSelfVolumesTotal();
            this.getFirstSelfVolume(this.currentPage);
        },

    }
</script>

<style scoped>

</style>
